<template>
  <div>
    <h2>组合api</h2>
    <p>{{ count }}</p>
    <button @click="add">btn</button>
  </div>
</template>

<script>
// ref是一个函数，执行以后会指向一块内存, 里面可以接受一个参数
import { ref } from "vue";
export default {
  // setup就是组合api(composition Api)的入口
  // setup同时也是组件的生命周期，这个生命周期是最早执行的
  // setup里面是取不到this的
  setup() {
    // 如果一个变量需要有响应式，就需要用到ref
    // count是一个复杂类型，并且下面有一个value为5
    const count = ref(5);
    const add = () => {
      // console.log(123);
      count.value++;
    };

    // setup里面定义的内容，想在模板里面使用，需要return
    return {
      count,
      add,
    };
  },

  // data() {
  //   return {
  //     count: 5
  //   }
  // },
  // methods: {
  //   add() {
  //     this.count++
  //   }
  // }
};
</script>
